<template>
    <div>
        <div class="app-container"  id="fullscreen">
            <!--  新增或编辑 -->
            <div class="container-table" v-if="!disabled">
                <el-form ref="formTable" :rules="rulesForm" :model="formTable">
                    <el-table v-loading="loading" :data="formTable.extraList" :row-class-name="tableRowClassName" @selection-change="handleSelectionChange" >

                        <!-- id -->
                        <!-- <el-table-column prop="id" label="ID"></el-table-column>   -->
                        <!-- 序号 -->
                        <el-table-column prop="serialNo" :label="$t('inventoryManagement.index')"></el-table-column>
                        <!-- 生产工单 -->
                        <el-table-column  :label="$t('costPassThrough.productionWorkOrder')" :render-header="remarksRenderHeader" align="left" prop="produceNo" min-width="150">
                            <template slot-scope="scope">
                                <el-form-item size="small" :prop="'extraList.' + scope.$index + '.produceNo'" :rules="produceNoRules(scope.row,scope.$index)">
                                    <el-input   v-model="scope.row.produceNo" size="small" />
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <!-- 销售订单 -->
                        <el-table-column :label="$t('costPassThrough.salesOrder')" align="left" prop="saleNo" width="100" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <el-form-item>
                                    <el-input   v-model="scope.row.saleNo" size="small" />
                                </el-form-item>
                            </template>
                        </el-table-column>
                         <!-- 产品&物料名称 -->
                        <el-table-column  :label="$t('costPassThrough.productAndMaterialNumber')"   align="left" prop="materialName" min-width="120">
                            <template slot-scope="scope">
                                <!-- <el-input  v-model="scope.row.materialName" size="small" /> -->
                                <material-dialog v-model="scope.row.materialName" @callback="(e)=>scope.row.materialRemark=e.materialName" :backDataType="1"/>
                            </template>
                        </el-table-column>
                        <!-- 物料描述 -->
                        <el-table-column  :label="$t('costPassThrough.itemDescription')" align="left" prop="materialRemark" width="250" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <el-form-item>
                                    <el-input v-model="scope.row.materialRemark" size="small" />
                                </el-form-item>
                            </template>
                        </el-table-column>

                        <!-- 异常类型 -->
                        <el-table-column  :label="$t('costPassThrough.exceptionType')" align="left" prop="abnormalType" width="100" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <el-form-item>
                                    <el-input  v-model="scope.row.abnormalType" size="small" />
                                </el-form-item>
                            </template>
                        </el-table-column>

                        <!-- 单位 -->
                        <el-table-column :label="$t('mrbForm.unit')" align="left" prop="mengeneinh" width="100" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <el-form-item>
                                    <el-input  v-model="scope.row.mengeneinh" size="small" />
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <!-- 数量 -->
                        <el-table-column :label="$t('mtool.quantity')" :render-header="remarksRenderHeader" width="110" align="left" prop="quantity">
                            <template slot-scope="scope">
                                <el-form-item :prop="'extraList.' + scope.$index + '.quantity'" :rules="checkoutTypeRules(scope.row,scope.$index)">
                                    <el-input v-model="scope.row.quantity" clearable size="small" />
                                </el-form-item>
                            </template>
                        </el-table-column>


                        <!-- 单价 -->
                        <el-table-column :label="$t('costPassThrough.unitPrice')"   width="100" align="left"  :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <el-form-item >
                                    <el-input v-model="scope.row.price" clearable size="small" />
                                </el-form-item>
                            </template>
                        </el-table-column>
                       <!-- 金额 -->
                        <el-table-column  :label="$t('costPassThrough.amount')"   width="100" align="left"   :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <el-form-item  :prop="'extraList.' + scope.$index + '.amount'"  >
                                    <el-input v-model="scope.row.amount" clearable size="small" />
                                </el-form-item>
                            </template>
                        </el-table-column>

                        <!-- 备注 -->
                        <el-table-column :label="$t('inventoryManagement.rejectReason')" align="left" prop="remarks" :show-overflow-tooltip="true"  min-width="180">
                            <template slot-scope="scope">
                                <el-form-item>
                                    <el-input v-model="scope.row.remarks" clearable size="small" />
                                </el-form-item>

                            </template>
                        </el-table-column>
                        <!-- 文件 -->
                        <el-table-column  :label="$t('costPassThrough.barcode')" align="left" prop="remarks" :show-overflow-tooltip="true"  min-width="100">
                            <template slot-scope="scope">
                                <el-form-item style="height: 70px;">

                                    <!-- <file-upload :otherList="findFileList(scope.row.id)"  :bizType="scope.row.id"
                                    :bizId="fileid" :limit="1"></file-upload> -->
                                    <FileUploadInput     :bizType="scope.row.id"  :bizId="fileid"
                                     @change="choseImg" v-model="scope.row.filePath"/>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column :label="$t('public.opera')" align="center" width="100">
                            <template slot-scope="scope">
                                <div class="action-wrap">
                                    <table-body-btn type="delete" @click.native="handleDelete(scope)" />
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form>
                 <div style="display: flex;justify-content: center;margin:20px auto 40px;">

                    <el-button   type="text" class="el-button"  @click="handleAdd">
                        <span><i class="el-icon-circle-plus"></i> {{$t('public.add')}}</span>
                    </el-button>
                 </div>
            </div>
            <!-- 查看 -->
            <div class="container-table" v-else>
                <el-table :data="formTable.extraList" :height="tableHeight" :row-class-name="tableRowClassName" @selection-change="handleSelectionChange">
                    <el-table-column prop="produceNo"  :label="$t('inventoryManagement.index')"></el-table-column>
                    <el-table-column prop="saleNo" :label="$t('costPassThrough.salesOrder')"></el-table-column>
                    <el-table-column prop="materialName"  :label="$t('costPassThrough.productAndMaterialNumber')"></el-table-column>
                    <el-table-column prop="materialRemark" :label="$t('costPassThrough.itemDescription')"></el-table-column>
                    <el-table-column prop="abnormalType" :label="$t('costPassThrough.exceptionType')"></el-table-column>
                    <el-table-column prop="mengeneinh" :label="$t('mrbForm.unit')"></el-table-column>
                    <el-table-column prop="quantity" :label="$t('mtool.quantity')"></el-table-column>
                    <el-table-column prop="price" :label="$t('costPassThrough.unitPrice')"></el-table-column>
                    <el-table-column prop="amount"  :label="$t('costPassThrough.amount')"></el-table-column>
                    <el-table-column prop="remarks" :label="$t('inventoryManagement.rejectReason')"></el-table-column>

                    <el-table-column :label="$t('costPassThrough.barcode')" align="left" prop="gap" width="80">
                        <template slot-scope="scope">
                                <div class="action-wrap">
                                    <img :src="scope.row.filePath" style="width: 70px;height: 70px;"/>
                                </div>
                            </template>

                    </el-table-column>
                </el-table>

            </div>
        </div>
    </div>
</template>

<script>
import {getIdAPI} from "@/api/costShift"
import {geFileByBiz} from '@/api/file/file'
import FileUploadInput from "@/components/FileUploadInput/index2.vue"
import MaterialDialog from '@/views/components/MaterialDialog/index2.vue'
export default {
    name: 'costItem',
    dicts: [

    ],
    props: ['itemData', 'disabled', 'fid', 'fileLists'],
    components: {
        FileUploadInput,MaterialDialog
    },
    data() {
        return {
            code: 'EW',
            id: this.$route.params.id || null,

            extraList: {

                costShiftId: "",
                serialNo: "",
                produceNo: "",
                saleNo: "",
                materialName: "",
                materialRemark: "",
                abnormalType: "",
                mengeneinh: "",
                quantity: "",
                price: "",
                amount: "",
                remarks: ""
            },
            formTable: {
                extraList: [],
            },
            projectList: [],


            addModel: {},
            viewModel: {},
            editModel: {},

            isView: this.$route.query.isView ? true : false,

            // 表单参数
            form: {},
            // 表单校验
            rules: {
                materialName: [
                    {
                        required: true,
                        message: this.$t('formValidation.materialNameCannotBeEmpty'),
                        trigger: 'blur',
                    },
                ],
                materialCode: [
                    {
                        required: true,
                        message: '物料编号不能为空',
                        trigger: 'blur',
                    },
                ],
                materialType: [
                    {
                        required: true,
                        message: '物料类型不能为空',
                        trigger: 'change',
                    },
                ],
                lot: [
                    {
                        required: true,
                        message: '批次不能为空',
                        trigger: 'blur',
                    },
                ],
                batchAmount: [
                    {
                        required: true,
                        message: '来料数量不能为空',
                        trigger: ['blur', 'change'],
                    },
                ],
                mengeneinh: [
                    {
                        required: true,
                        message: '请选择单位',
                        trigger: 'change',
                    },
                ],
                maturity: [
                    {
                        required: true,
                        message: '成熟度不能为空',
                        trigger: 'blur',
                    },
                ],
            },
            rulesForm: {},
            loading: false,
            fullscreen: false,
            templateVisible: false,
            tableHeight: '300',
            fileid:""
        }
    },
    mounted() {

    },
    watch: {
        itemData: {
            handler(newVal) {
                if (newVal.length) {
                    let extraData = [...newVal]

                    this.formTable.extraList = JSON.parse(
                        JSON.stringify(extraData)
                    )
                } else {
                    let extraData =
                        this.extraList.length > 0 ? [...this.extraList] : [ ]

                    this.formTable.extraList = extraData
                }
                this.judgementTable()
            },
            deep: true,
            immediate: true,
        },
        fid:{
            handler(newVal){
                this.fileid=newVal
                this.geFileByBizlist()
            }
        }
    },
    created() {

    },

    methods: {
        choseImg(data){
            console.log(data)
        },
        geFileByBizlist() {
            geFileByBiz({ bizId: this.fileid }).then((res) => {
                this.fileList = res.data
                console.log(this.fileList,"file*************" )
            })
        },
        findFileList(type){
            var list=this.fileList?.filter(item=>item.bizType==type)
            this.$forceUpdate()
            return list

        },
        judgementTable() {
            this.formTable.extraList.forEach((io, index) => {
                io.index = index
            })
        },
          /** 新增按钮操作 */
        handleAdd() {
            getIdAPI().then(res=>{
                if (res.code==200) {
                    var num=this.formTable.extraList.length+1
                    this.formTable.extraList.push({ ...this.extraList,id:res.msg,serialNo:num })
                    this.judgementTable()
                }
            })

        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            let selectIndex = selection.map((item) => item.index)
            this.formTable.extraList.forEach((io, index) => {
                if (selectIndex.includes(io.index)) {
                    io.isHighLight = true
                } else {
                    io.isHighLight = false
                }
            })
            this.single = selection.length != 1
            this.multiple = !selection.length
        },
        tableRowClassName({ row, rowIndex }) {
            console.log('rowIndex', rowIndex, row)
            if (row.isHighLight === true) {
                console.log('rowIndex', row)
                return 'rowHighLight' //若isHighLight为true，则使用“rowHighLight”样式
            } else {
                return ''
            }
        },

        /** 发起检验提交 */
        submitAddForm: function () {
            if (this.disabled) {
                this.$emit('callback', this.formTable.extraList)
            } else {
                this.$refs['formTable'].validate((val, error, three) => {
                    console.log(this.$refs['formTable'].fields)
                    if (val) {
                        this.$emit('callback', this.formTable.extraList)
                    } else {
                        let validateMessage = ''
                        this.$refs['formTable'].fields.forEach((io) => {
                            if (
                                io.validateMessage &&
                                io.validateMessage.length > 0
                            ) {
                                validateMessage = io.validateMessage
                            }
                        })
                        if (validateMessage.length > 0) {
                            this.$modal.msgError(validateMessage)
                        } else {
                            this.$modal.msgError(
                                '明细信息填写不完整，请仔细检查后再确定!'
                            )
                        }
                    }
                })
            }
        },
        detectCallback(val, row, index) {
            console.log(val)
            this.$set(this.formTable.extraList[index], 'detectionTwo', val)
            this.$refs.formTable.validateField(
                'extraList.' + index + '.detectionTwo'
            )
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            if (this.formTable.extraList.length === 1) {
                this.$modal.msgWarning('请至少保留一条检验项!')
                return
            }
            this.formTable.extraList.splice(row.$index, 1)
            this.judgementTable()
        },

        templateDataCallback(data) {
            console.log('检验标准选择模板：', data)
            let extraData = [...data.itemList]
            // extraData.forEach((io) => {
            //     io.rows = 1
            //     if (io.lowerLimit === '' || io.lowerLimit === null) {
            //         io.lowerLimit = undefined
            //     }
            //     if (io.upperLimit === '' || io.upperLimit === null) {
            //         io.upperLimit = undefined
            //     }
            //     if (io.targetValue && io.targetValue.length > 0) {
            //         io.rows = this.buildRows(io.targetValue)
            //     }
            //     if (io.inspectionMethod === '核对COA') {
            //         io.checkoutType = '布尔型'
            //     }
            // })
            this.formTable.extraList = extraData
            this.judgementTable()
        },

        remarksRenderHeader(h, { column, $index }) {
            return h('span', [
                h(
                    'span',
                    {
                        style: {
                            color: '#ff1818',
                        },
                    },
                    '*'
                ),
                h('span', column.label),
            ])
        },
        produceNoRules(row, index) {
            return [
                {
                    require: true,
                    validator: (rule, value, callback) => {
                        if (
                            value === null ||
                            value === undefined ||
                            value === ''
                        ) {
                            return callback(new Error(''))
                        }
                        callback()
                    },
                    trigger: 'change',
                },
            ]
        },
        unitRules(row, index) {
            return [
                {
                    require: true,
                    validator: (rule, value, callback) => {
                        if (
                            value === null ||
                            value === undefined ||
                            value === ''
                        ) {
                            return callback(new Error(''))
                        }
                        callback()
                    },
                    trigger: 'change',
                },
            ]
        },
        itemmengeneinhRules(row, index) {
            return [
                {
                    require: true,
                    validator: (rule, value, callback) => {
                        if (
                            value === null ||
                            value === undefined ||
                            value === ''
                        ) {
                            return callback(new Error(''))
                        }
                        callback()
                    },
                    trigger: 'change',
                },
            ]
        },
        itemmengeneinhValueRules(row, index) {
            return [
                {
                    require: true,
                    validator: (rule, value, callback) => {
                        if (
                            value === null ||
                            value === undefined ||
                            value === ''
                        ) {
                            return callback(new Error(''))
                        }
                        callback()
                    },
                    trigger: 'blur',
                },
            ]
        },
        checkoutTypeRules(row, index) {
            return [
                {
                    require: true,
                    validator: (rule, value, callback) => {
                        if (
                            value === null ||
                            value === undefined ||
                            value === ''
                        ) {
                            return callback(new Error(''))
                        }
                        callback()
                    },
                    trigger: 'change',
                },
            ]
        },
        decimalPlaceRules(row, index) {
            return [
                {
                    require: true,
                    validator: (rule, value, callback) => {
                        if (
                            value === null ||
                            value === undefined ||
                            value === ''
                        ) {
                            return callback(new Error(''))
                        }
                        callback()
                    },
                    trigger: 'blur',
                },
            ]
        },
        upperLimitRules(row, index) {
            return [
                {
                    require: true,
                    validator: (rule, value, callback) => {
                        if (
                            value === null ||
                            value === undefined ||
                            value === ''
                        ) {
                            return callback(new Error(''))
                        }
                        callback()
                    },
                    trigger: 'blur',
                },
            ]
        },
        lowerLimitRules(row, index) {
            return [
                {
                    require: true,
                    validator: (rule, value, callback) => {
                        if (parseInt(value) > parseInt(row.mengeneinh)) {
                            return callback(new Error('下限值不能大于上限值!'))
                        }
                        callback()
                    },
                    trigger: 'blur',
                },
            ]
        },
        targetValueRules(row, index) {
            return [
                {
                    require: true,
                    validator: (rule, value, callback) => {
                        if (
                            value === null ||
                            value === undefined ||
                            value === ''
                        ) {
                            return callback(new Error(''))
                        }
                        callback()
                    },
                    trigger: ['blur', 'change'],
                },
            ]
        },
        samplingOneRules(row, index) {
            return [
                {
                    require: true,
                    validator: (rule, value, callback) => {
                        if (
                            value === null ||
                            value === undefined ||
                            value === ''
                        ) {
                            return callback(new Error(''))
                        }
                        callback()
                    },
                    trigger: 'change',
                },
            ]
        },
        samplingTwoRules(row, index) {
            return [
                {
                    require: true,
                    validator: (rule, value, callback) => {
                        if (
                            value === null ||
                            value === undefined ||
                            value === ''
                        ) {
                            return callback(new Error(''))
                        }
                        callback()
                    },
                    trigger: ['change', 'blur'],
                },
            ]
        },
        samplingThreeRules(row, index) {
            return [
                {
                    require: true,
                    validator: (rule, value, callback) => {
                        if (
                            value === null ||
                            value === undefined ||
                            value === ''
                        ) {
                            return callback(new Error(''))
                        }
                        callback()
                    },
                    trigger: ['change', 'blur'],
                },
            ]
        },
        inspectionMethodRules(row, index) {
            return [
                {
                    require: true,
                    validator: (rule, value, callback) => {
                        if (
                            value === null ||
                            value === undefined ||
                            value === ''
                        ) {
                            return callback(new Error(''))
                        }
                        callback()
                    },
                    trigger: 'change',
                },
            ]
        },
        detectionTwoRules(row, index) {
            return [
                {
                    require: true,
                    validator: (rule, value, callback) => {
                        if (
                            value === null ||
                            value === undefined ||
                            value === ''
                        ) {
                            return callback(new Error(''))
                        }
                        callback()
                    },
                    trigger: ['change'],
                },
            ]
        },
        symbolRules(row, index) {
            return [
                {
                    require: true,
                    validator: (rule, value, callback) => {
                        if (
                            value === null ||
                            value === undefined ||
                            value === ''
                        ) {
                            return callback(new Error(''))
                        }
                        callback()
                    },
                    trigger: 'change',
                },
            ]
        },





    },
}
</script>
<style lang="scss" scoped>
::v-deep .el-card {
    padding-top: 0px !important;
    border: 0px;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    padding-bottom: 20px;
}
::v-deep .app-container {
    padding: 0px !important;
}
::v-deep .el-aside {
    padding: 0;
    margin-bottom: 0;
}

.container-header {
    float: left;
    width: 100%;
    border-bottom: 1px solid #ededf2;
    padding-left: 12px;
}
.container-table {


    width: 100%;
}
.header-left {
    float: left;
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    line-height: 40px;
}
.header-right {
    float: right;
}
.hign-line {
    position: relative;
    left: -8px;
    top: 14px;
    height: 12px;
    border-radius: 2px;
    border: 1px solid #0b7be3;
    float: left;
}
.mb8 {
    float: left;
    margin-top: 6px;
    width: 100%;
}

::v-deep .el-card {
    padding-top: 0px;
}

::v-deep .el-table .el-form-item {
    margin-bottom: 0;
}
::v-deep .el-input-group {
    vertical-align: baseline;
}
::v-deep .multipleInput .cell {
    display: flex;
}
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
}
::v-deep input[type='number'] {
    -moz-appearance: textfield !important;
}
// ::v-deep .el-table__body {
//     height: 100% !important;
// }
::v-deep .el-textarea__inner {
    min-height: 28px !important;
    padding: 3px 15px;
}
.textarea-change ::v-deep .el-form-item__content {
    line-height: 30px !important;
}
::v-deep .rowHighLight {
    background: oldlace;
}
::v-deep .view-textarea .el-textarea__inner {
    padding-left: 0px;
    border: 0px !important;
    background: transparent;
}
::v-deep .el-table__body-wrapper {
    z-index: 2;
}
</style>
